<template>
    <div>
        <el-dialog :title="isAdd ? '添加角色' : '编辑角色'" :model-value='isShow' :before-close="cancel">
            <el-form :model="roleForm" ref="formRef" :rules="rules">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
                    <el-input v-model="roleForm.rolename" />
                </el-form-item>
                <el-form-item label="角色权限" :label-width="formLabelWidth" v-model="roleForm.menus" >
                    <el-tree :data="store.getters['menu/getMenu']" ref="treeRef" show-checkbox default-expand-all
                        node-key="id" highlight-current :props="{
                            children: 'children',
                            label:'title'}" />
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
                        :inactive-value="2" v-model="roleForm.status" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="confirm">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, defineProps ,defineExpose} from 'vue'
import { ElMessage, FormInstance, FormRules, ElTree } from "element-plus";
import { useStore } from 'vuex'
import { roleadd,roleedit,roleinfo } from '../../request/api'
let formRef = ref<FormInstance>()
const treeRef = ref<InstanceType<typeof ElTree>>()
let store = useStore()
store.dispatch('role/changeRoleAction')
let props = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})
let rules = reactive<FormRules>({
    rolename: [
        { required: true, message: "请输入角色名称", trigger: "blur" },
        { min: 2, max: 6, message: "长度在2-6", trigger: "blur" },
    ],
});
let roleForm = ref({
    rolename: '',
    menus: '',
    status: 1
})
let reset = () => {
    roleForm.value = {
        rolename: '',
        menus: '',
        status: 1
    }
    formRef.value?.resetFields()
}
let emit = defineEmits(['cancel'])
let cancel = () => {
    emit('cancel', false)
    reset()
}
let lookup=(id:number)=>{
roleinfo({id}).then((res:any)=>{
    if(res.data.code==200){
        roleForm.value=res.data.list
        roleForm.value.id=id
    }else{
        ElMessage.error(res.data.msg)  
    }
})
}
let confirm = () => {
    formRef.value?.validate((val) => {
        console.log(roleForm);
        if (val) {
            roleForm.value.menus=treeRef.value!.getCheckedKeys(false).join(',')
            if (props.isAdd) {
                roleadd(roleForm.value).then((res: any) => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.msg)
                        cancel()
                        store.dispatch('role/changeRoleAction')
                    } else {
                        ElMessage.error(res.data.msg)
                    }

                })
            }else{
                roleedit(roleForm.value).then((res:any)=>{
                    if(res.data.code==200){
                        ElMessage.success(res.data.msg)
                        cancel()
                        store.dispatch('role/changeRoleAction')
                    }else {
                        ElMessage.error(res.data.msg)
                    }
                })
            }
        }

    })
}
defineExpose({
    lookup
})
const formLabelWidth = '140px'
</script>

<style scoped lang="less"></style>